<template>
	<view class="content">
		<navigator url="/pages/activity/list" class="indexad_1"><img src="~@/static/ad2.jpg"></navigator>
		<view class="activity_box">
			<view class="indexad_1"><img src="~@/static/img/bg/sale_title.jpg"></view>
			
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_1.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_3.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_2.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_2.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_1.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_3.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_2.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_2.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_1.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_3.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_2.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_2.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_1.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_3.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			<navigator class="activity_li" url="/pages/activity/show">
				<view class="banner_img"><img class="banner_img" src="~@/static/banner_2.jpg"></view>
				<view class="activity_info_box">
					<view class="logos"><img src="~@/static/baner_logo_2.jpg"></view>
					<view class="name_text">Dior迪奥专场</view>
					<view class="sale"><b>2.3</b><span>折/起</span></view>
				</view>
			</navigator>
			
		</view>
		
		<!-- 返回顶部 -->
		<view :class="['gotop',scrollTop > 300 ? 'gotops' : '']" @click="onGotoTop"><img src="~@/static/img/icon/gotop.png"></view>
	</view>
</template>

<script>
export default {
    data() {
        return {
			scrollTop:0,
        }
    },
    onLoad() {
        this.loadData();
        setTimeout(()=> {
            this.renderImage = true;
        }, 300);
    },
	onPageScroll(res){
		this.scrollTop = res.scrollTop;
	},
	methods:{
		onGotoTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},	
		async loadData() {

		},
	}
}
</script>

<style lang='scss'>
	page { background:$bgcolor_white; }
	.activity_box { padding:0 1% 26upx 1%; }
	.activity_li { width:48%; height:auto; display:block; float:left; margin:0 1%; }
	.activity_li .banner_img { width:354upx; height:216.55upx; margin:0px; }
	.activity_li .banner_img img { width:354upx; height:216.55upx; }
	.activity_li .activity_info_box { width:354upx; height:60upx; border:1px solid #eeeeee; border-top:0px; position:relative; display:block; margin-top:0px; padding:0px; margin-bottom:20upx; }
	.activity_li .activity_info_box .logos { width:70upx; height:70upx; background:#ffffff; overflow:hidden; border:1px solid #eee; left:12upx; top:-35upx; position:absolute; border-radius:80upx; }
	.activity_li .activity_info_box .logos img { height:70upx; margin-left:-16upx; }
	.activity_li .activity_info_box .name_text { height:60upx; line-height:60upx; font-size:18upx; padding-left:92upx; }
	.activity_li .activity_info_box .sale { height:60upx; line-height:60upx; position:absolute; right:12upx; top:0px; }
	.activity_li .activity_info_box .sale span { font-size:18upx; color:#999999; }
	.activity_li .activity_info_box .sale b { font-size:28upx; color:#e32e37; padding-right:3px; }
</style>